<template>
  <div class="result-container">
   
    <!-- 标题 -->
    <div class="title-section">
      <h1>AI职级测评报告</h1>
      <p>基于大数据分析的专业职业洞察报告</p>
    </div>
  <!-- 使用 el-row 分割布局 -->
    <el-row :gutter="20">
      <!-- 左侧主内容区：8列 -->
      <el-col :span="16">
    <!-- 主要结果卡片 -->
      <el-row  :gutter="20" v-if="resultData" class="main-result-card">
        <el-col :span="12">
            <div class="trophy-icon">🏆</div>
            <h2 class="level-title">阿里 {{ resultData.predicted_level }} 级别</h2>
            <p class="level-text">{{ getLevelTitle(resultData.predicted_level) }}</p>
            <!-- <div class="score-info">
              <span>综合得分: {{ resultData.confidence }}</span>
            </div> -->

            <!-- 薪资范围 -->
            <div class="salary-section">
              <div class="salary-label">薪资范围：</div>
              <div class="salary-value">
                {{ resultData.salary_analysis.salary_range_text }}
                 
              </div>
              <div class="salary-label">总包均值：</div>
              <div class="salary-value">
                {{ resultData.salary_analysis.total_comp_mean }} 元
              </div>

            </div>
        </el-col>
      

        <!-- 其他公司对标 -->
        <el-col :span="12" v-if="resultData && resultData.equivalent_levels" class="other-companies-section">
          <div class="section-title">🏢 其他公司对标</div>
          <div class="companies-grid">
            <div v-for="(company, companyName) in resultData.equivalent_levels" :key="companyName" class="company-card">
              <div class="company-name-duibiao">{{ companyName }}</div>
              <div class="level-info">
                <span class="level-label">级别：</span>
                <span class="level-value">{{ company.level }}</span>
              </div>
              <div class="salary-difference">
                <span class="difference-label">薪资差异：</span>
                <span class="difference-value" :class="{ positive: company.salary_difference > 0, negative: company.salary_difference < 0 }">
                  {{ company.salary_difference > 0 ? '+' : '' }}{{ company.salary_difference.toFixed(0) }}元
                </span>
              </div>
              <div class="total-comp">
                <span class="comp-label">总包均值：</span>
                <span class="comp-value">{{ company.total_comp_mean.toFixed(0) }}元</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

   
        <!-- 合并后的专属分析报告区块 -->
        <div v-if="resultData" class="analysis-report-container">
          <div class="report-header">
            <div class="icon">💡</div>
            <span class="title">专属分析报告</span>
          </div>
            <el-row :gutter="20">
              <el-col :span="12">
                 <!-- 你的信息一览 -->
                  <div class="">
                    
                    <div class="section-title">📋 你的信息一览</div>
                    <div class="">
                     <div class="info-item">
                        <div class="icon">🎓</div>
                        <div class="label">毕业院校：</div>
                        <div class="value">{{ (resultData && resultData.extracted_info ? resultData.extracted_info.bachelor_school : formData.bachelor_school) || '未提供' }}</div>
                      </div>
                      <div class="info-item">
                        <div class="icon">⏰</div>
                        <div class="label">工作年限：</div>
                        <div class="value">{{ (resultData && resultData.extracted_info ? resultData.extracted_info.year_of_experience : formData.year_of_experience) || '未提供' }}年</div>
                      </div>
                      <div class="info-item">
                        <div class="icon">💰</div>
                        <div class="label">年薪：</div>
                        <div class="value">{{ (resultData && resultData.extracted_info && resultData.extracted_info.annual_salary ? resultData.extracted_info.annual_salary + '元' : (formData.annual_salary ? formData.annual_salary + '元' : '未提供')) }}</div>
                      </div>
                      <div class="info-item">
                        <div class="icon">🏙️</div>
                        <div class="label">工作城市：</div>
                        <div class="value">{{ (resultData && resultData.extracted_info ? resultData.extracted_info.location : formData.location) || '未提供' }}</div>
                      </div>
                    </div>
                  </div>
              </el-col>
              <el-col :span="12">
                      <!-- 概率分布 - 饼图 -->
                  <div class="">
                    <div class="section-title">📈 职级预测概率</div>
                    <div ref="chartRef" class="chart-container" style="width: 100%; height: 200px;"></div>
                  </div>
              </el-col>
            </el-row>
         

   

          <!-- 专属分析文本 -->
          <div class="probability-chart">
            {{ getAnalysisText(resultData.predicted_level, resultData.confidence) }}
          </div>
        </div>

    

        <!-- 特征评分 -->
        <!-- <div v-if="resultData && resultData.feature_scores" class="feature-scores">
          <div class="section-title">📊 特征评分</div>
          <div class="scores-grid">
            <div v-for="(score, key) in resultData.feature_scores" :key="key" class="score-item">
              <div class="score-label">{{ getKeyLabel(key) }}：</div>
              <div class="score-value">{{ score }}分</div>
            </div>
          </div>
        </div> -->
        
             <!-- 四个功能卡片（市场定位、薪资预测、能力建议、职业路径） -->
        <div class="cards-grid">
          <div class="card-item market-analysis">
            <div class="card-header">
              <div class="icon">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <div class="title">市场定位分析</div>
              <div class="subtitle">基于行业大数据的专业评估</div>
            </div>
            <div class="card-content">
                {{ resultData && resultData.comment ? resultData.comment.positioning : '' }}
            </div>
          </div>

          <div class="card-item salary-prediction">
            <div class="card-header">
              <div class="icon">💰</div>
              <div class="title">薪资水平预测</div>
              <div class="subtitle">基于同行业相似背景分析</div>
            </div>
            <div class="card-content">
               {{ resultData && resultData.comment ? resultData.comment.salary : '' }}
            </div>
          </div>

          <div class="card-item ability-suggestion">
            <div class="card-header">
              <div class="icon">💡</div>
              <div class="title">能力提升建议</div>
              <div class="subtitle">个性化发展路径规划</div>
            </div>
            <div class="card-content">
               {{ resultData && resultData.comment ? resultData.comment.advice : '' }}
            </div>
          </div>

          <div class="card-item career-path">
            <div class="card-header">
              <div class="icon">🔔</div>
              <div class="title">职业发展路径</div>
              <div class="subtitle">基于趋势分析的未来规划</div>
            </div>
            <div class="card-content">
               {{ resultData && resultData.comment ? resultData.comment.growing : '' }}
            </div>
          </div>
        </div>

      
      </el-col>

      <!-- 右侧注册模块：4列，悬浮 -->
      <el-col :span="8">
        <div class="sticky-register">
            <!-- 新增注册模块 -->
            <div class="register-section">
              <div class="register-container">


                <!-- 右侧注册表单 -->
                <div class="register-right">
                  <h3>🚀 超快注册，1秒搞定！</h3>
                  <form @submit.prevent="handleRegister">
                    <div class="form-group">
                      <label for="username">👤 用户名</label>
                      <input type="text" id="username" v-model="username" required placeholder="请输入您的用户名" />
                    </div>
                    <div class="form-group">
                      <label for="email">📧 邮箱地址</label>
                      <input type="email" id="email" v-model="email" required placeholder="请输入您的邮箱" />
                    </div>
                    <div class="form-group">
                      <label for="password">🔒 密码</label>
                      <input type="password" id="password" v-model="password" required placeholder="请输入密码" />
                    </div>
                    <button type="submit" class="register-btn" :disabled="loading">
                      {{ loading ? '注册中...' : '立即免费注册！' }}
                    </button>
                  </form>
                </div>
              </div>
            </div>
      <!-- 职位推荐 -->

          <div class="job-recommendations">
            <div class="section-title">💼 推荐职位</div>
            
            <!-- 职位卡片1 -->
             <!-- 职位信息卡片 -->
              <div class="job-card">
                <div class="ai-tag">AI推荐</div>
                
                <div class="job-content">
                  <!-- 左侧职位信息 -->
                  <div class="job-left">
                    <h2 class="job-title">前端开发 <span class="job-level">2-1</span></h2>
                  
                    
                    <div class="salary-info">
                      <span class="salary-label">薪酬：</span>
                      <span class="salary-value">38.0万/年</span>
                    </div>
                    
                    <div class="post-time">2天前</div>
                  </div>
                  
                  <!-- 右侧公司信息和申请按钮 -->
                  <div class="job-right">
                    <div class="company-info">
                      <div class="company-name">
                       
                       <span>字节跳动</span> 
                      </div>
                      <div class="location">深圳</div>
                    </div>
                    
                    <button class="apply-btn">立即申请</button>
                  </div>
                </div>
              </div>
               <div class="job-card">
                <div class="ai-tag">AI推荐</div>
                
                <div class="job-content">
                  <!-- 左侧职位信息 -->
                  <div class="job-left">
                    <h2 class="job-title">前端开发 <span class="job-level">2-1</span></h2>
                  
                    
                    <div class="salary-info">
                      <span class="salary-label">薪酬：</span>
                      <span class="salary-value">38.0万/年</span>
                    </div>
                    
                    <div class="post-time">2天前</div>
                  </div>
                  
                  <!-- 右侧公司信息和申请按钮 -->
                  <div class="job-right">
                    <div class="company-info">
                      <div class="company-name">
                       
                        字节跳动
                      </div>
                      <div class="location">深圳</div>
                    </div>
                    
                    <button class="apply-btn">立即申请</button>
                  </div>
                </div>
              </div>

               <div class="job-card">
                <div class="ai-tag">AI推荐</div>
                
                <div class="job-content">
                  <!-- 左侧职位信息 -->
                  <div class="job-left">
                    <h2 class="job-title">前端开发 <span class="job-level">2-1</span></h2>
                  
                    
                    <div class="salary-info">
                      <span class="salary-label">薪酬：</span>
                      <span class="salary-value">38.0万/年</span>
                    </div>
                    
                    <div class="post-time">2天前</div>
                  </div>
                  
                  <!-- 右侧公司信息和申请按钮 -->
                  <div class="job-right">
                    <div class="company-info">
                      <div class="company-name">
                       
                        字节跳动
                      </div>
                      <div class="location">深圳</div>
                    </div>
                    
                    <button class="apply-btn">立即申请</button>
                  </div>
                </div>
              </div>
          </div>
        </div>

       
       

      </el-col>
    </el-row>

    <!-- 下一步行动建议 -->
    <!-- <div class="action-section">
      <div class="action-title">下一步行动建议</div>
      <p class="action-desc">基于测评结果，为您推荐最适合的职位机会</p>
      <div class="action-buttons">
        <el-button type="primary" @click="viewJobs">🔍 查看匹配职位</el-button>
        <el-button @click="goBack">🔄 重新测试</el-button>
      </div>
    </div> -->
  </div>
</template>

<script setup> 

import { ref, computed, onMounted,watch,nextTick,onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { userApi } from '@/utils/api';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';


const router = useRouter();
const route = useRoute();
// 注册相关数据
const username = ref('');
const email = ref('');
const password = ref('');
const loading = ref(false); // 添加loading状态
// 新增 ref 用于挂载图表
const chartRef = ref(null);


// 修改 initChart 函数
const initChart = () => {
  if (!chartRef.value) return;

  // 使用实际的概率数据
  let chartData = [];
  if (resultData.value && resultData.value.probabilities) {
    const probs = resultData.value.probabilities;
    chartData = Object.keys(probs).map(level => {
      return {
        name: level,
        value: parseFloat((probs[level] * 100).toFixed(2)),
        color: getColorByLevel(level)
      };
    });
  } else {
    // 默认数据作为后备
    chartData = [
      { name: 'P4', value: 45.7, color: '#5a97e4' }, // 蓝色
      { name: 'P5', value: 35.2, color: '#8d5cf6' }, // 紫色
      { name: 'P3', value: 15.8, color: '#00c78c' }, // 青色
      { name: 'P2', value: 3.3, color: '#f56c6c' }   // 绿色
    ];
  }

  const chart = echarts.init(chartRef.value);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}%'
    },
    legend: {
      show: true,
      top: 'bottom',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    series: [
      {
        name: '职级预测概率',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#0a1a40',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {c}%',
          color: '#fff',
          fontSize: 12
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 10
        },
        data: chartData.map(item => ({
          name: item.name,
          value: item.value,
          itemStyle: {
            color: item.color
          }
        }))
      }
    ]
  };

  chart.setOption(option);

  // 响应式调整
  const resizeChart = () => {
    chart.resize();
  };
  window.addEventListener('resize', resizeChart);

  // 组件卸载时清理
  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    chart.dispose();
  });
};

// 根据职级获取颜色的辅助函数
const getColorByLevel = (level) => {
  const colors = {
    'P2': '#f56c6c',   // 红色
    'P3': '#00c78c',   // 青色
    'P4': '#5a97e4',   // 蓝色
    'P5': '#8d5cf6',   // 紫色
    'P6': '#409eff',   // 亮蓝色
    'P7': '#e6a23c',   // 橙色
    'P8': '#ff6b81'    // 粉红色
  };
  return colors[level] || '#909399'; // 默认灰色
};


// 处理注册提交
const handleRegister = async () => {
  // 表单验证
  if (!username.value || username.value.length < 3 || username.value.length > 20) {
    ElMessage.error('用户名长度应为3-20个字符');
    return;
  }

  if (!email.value) {
    ElMessage.error('请输入邮箱地址');
    return;
  }

  if (!password.value || password.value.length < 8 || password.value.length > 20) {
    ElMessage.error('密码长度应为8-20位');
    return;
  }

  loading.value = true;
  
  try {
    // 调用注册接口
    const data = {
      email: email.value,
      password: password.value,
      full_name: username.value
    };

    await userApi.register(data);
    ElMessage.success('注册成功');
    router.push('/login');
  } catch (error) {
    console.error('注册失败:', error);
    // 更详细地处理错误信息
    let errorMessage = '注册失败，请稍后重试';
    
    if (error.response) {
      switch (error.response.status) {
        case 422:
          // 处理验证错误
          if (error.response.data && error.response.data.detail) {
            if (Array.isArray(error.response.data.detail)) {
              // 如果是数组形式的错误详情
              errorMessage = error.response.data.detail[0].msg || errorMessage;
            } else if (typeof error.response.data.detail === 'string') {
              // 如果是字符串形式的错误详情
              errorMessage = error.response.data.detail;
            } else if (error.response.data.detail.msg) {
              // 如果是对象形式的错误详情
              errorMessage = error.response.data.detail.msg;
            }
          }
          break;
        case 409:
          errorMessage = '该邮箱已被注册，请直接登录或使用其他邮箱';
          break;
        case 500:
          errorMessage = '服务器内部错误，请稍后重试';
          break;
        default:
          errorMessage = error.response.data?.detail || errorMessage;
      }
    } else if (error.request) {
      errorMessage = '网络连接失败，请检查网络设置';
    }
    
    ElMessage.error(errorMessage);
  } finally {
    loading.value = false;
  }
};

// 表单数据
const formData = ref({
  bachelor_school: '北京大学',
  year_of_experience: 5,
  base_monthly_salary: 25000,
  location: '深圳'
});

// 结果数据
const resultData = ref(null);

// 获取职级标题
const getLevelTitle = (level) => {
  const titles = {
    'P5': '资深工程师',
    'P6': '高级工程师',
    'P7': '技术专家',
    'P8': '高级技术专家'
  };
  return titles[level] || '工程师';
};

// 获取分析文本
const getAnalysisText = (level, confidence) => {
  const texts = {
    'P5': `厉害了我的哥！你已经达到阿里P5级别，资深工程师耶！三言两语就把老板画的大饼变成了可落地的OKR，战略思维拉满，需求变更都追不上你的节奏！独当一面解决复杂问题，妥妥的技术大佬！🚀`,
    'P6': `太棒了！你已经晋升到阿里P6级别，高级工程师！面对产品经理的第18次需求变更，还能保持佛系心态，代码重构跟玩儿似的，微服务拆得比火锅还细！能够独立负责重要模块，技术能力出众，未来可期！🌟`,
    'P7': `恭喜你！你已经达到了阿里P7级别，技术专家！一个需求文档看透产品本质，技术方案写得比论文还严谨，bug修复速度比我点外卖还快！在技术领域有深入研究，能够指导团队，是团队的技术骨干！🔥`,
    'P8': `牛逼！你已经达到了阿里P8级别，高级技术专家！跨部门沟通比自家兄弟还顺畅，资源协调能力堪比联合国秘书长，甲方爸爸都被你拿捏得死死的！在行业内有影响力，能够制定技术方向，引领技术创新！💥`
  };
  return texts[level] || `恭喜你！你已经达到阿里${level}级别，技术实力非常强！继续加油！💪`;
};

// 获取特征评分标签
const getKeyLabel = (key) => {
  const labels = {
    'compensation_score': '薪资匹配度',
    'education_score': '学历匹配度',
    'experience_score': '经验匹配度',
    'responsibility_score': '职责匹配度'
  };
  return labels[key] || key;
};

// 返回首页
const goBack = () => {
  router.push('/fillinfo');
};

// 查看职位
const viewJobs = () => {
  router.push('/jobs');
};

// 修改监听逻辑
watch(() => resultData.value, () => {
  // 确保DOM更新后初始化图表
  nextTick(() => {
    initChart();
  });
}, { deep: true, immediate: true });

// 挂载时解析参数
onMounted(() => {
  
    // 尝试从localStorage中获取
    const savedResult = localStorage.getItem('predictResult');
    if (savedResult) {
      try {
        const parsedData = JSON.parse(savedResult);
        console.log('从localStorage中获取的预测结果：', parsedData);
        resultData.value = parsedData;
        formData.value = parsedData.form_data;
      } catch (e) {
        console.error('解析保存的结果数据失败:', e);
      }
    }

     // 确保DOM渲染完成后再初始化图表
  nextTick(() => {
    initChart();
  });
});



</script>

<style scoped>
.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a1a40, #1a3d8c);
  color: white;
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
}

.back-link {
  color: #a0d8ff;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: color 0.3s;
}
.back-link:hover {
  color: #ffffff;
}

.title-section {
  text-align: center;
  margin-bottom: 30px;
}
.title-section h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  color: white;
}
.title-section p {
  font-size: 14px;
  color: #a0d8ff;
  margin-top: 8px;
}

.main-result-card {
  width: 100%;
  max-width: 800px;
  background: linear-gradient(135deg, #2b6cb0, #5a97e4);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
  color: white;
}

.trophy-icon {
  font-size: 120px;
  margin-bottom: 16px;
  color: #ffc107;
}

.level-title {
  font-size: 32px;
  font-weight: bold;
  margin: 0;
}

.level-text {
  font-size: 18px;
  opacity: 0.9;
  margin: 8px 0;
}

.score-info {
  font-size: 14px;
  color: #a0d8ff;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 12px;
  display: inline-block;
}

.cards-grid {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  gap: 20px;
  width: 100%;
  max-width: 800px;
  margin-bottom: 30px;
}

.card-item {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.card-item:hover {
  transform: translateY(-4px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.card-header .icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-header .title {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.card-header .subtitle {
  font-size: 12px;
  color: #a0d8ff;
}

.card-content {
  font-size: 14px;
  line-height: 1.6;
  color: #e0f7ff;
}

/* 专属分析报告 */
.analysis-report {
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.report-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.report-header .icon {
  font-size: 20px;
  color: #ff9800;
}

.report-header .title {
  font-size: 16px;
  font-weight: 600;
  color: #ff9800;
}

.report-content {
  font-size: 16px;
  line-height: 1.6;
  color: #e0f7ff;
}

/* 你的信息一览 */
.user-info-section {
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 12px;
  padding-left: 8px;
  position: relative;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #e63a8c;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  margin-top: 20px;
}

.info-item .icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  background: #9c27b0;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-item .label {
  color: #a0d8ff;
  font-weight: 500;
}

.info-item .value {
  color: #e0f7ff;
  font-weight: 500;
}

/* 其他公司对标 */
.other-companies {
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.companies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.company-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.company-name-duibiao {
  font-size: 16px;
  font-weight: 600;
  color: #e63a8c;
  margin-bottom: 8px;
}

.level-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.level-label {
  font-size: 14px;
  color: #a0d8ff;
}

.level-value {
  font-size: 14px;
  font-weight: 500;
  color: #e0f7ff;
}

.salary-difference {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.difference-label {
  font-size: 14px;
  color: #a0d8ff;
}

.difference-value {
  font-size: 14px;
  font-weight: 500;
  color: #e0f7ff;
}

.difference-value.positive {
  color:#0df716;
}

.difference-value.negative {
  color: #f44336;
}

.total-comp {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-label {
  font-size: 14px;
  color: #a0d8ff;
}

.comp-value {
  font-size: 14px;
  font-weight: 500;
  color: #e0f7ff;
}

/* 特征评分 */
.feature-scores {
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.scores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.score-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.score-label {
  color: #a0d8ff;
  font-weight: 500;
}

.score-value {
  color: #e0f7ff;
  font-weight: 500;
}

/* 概率分布 */
.probability-chart {
  margin-top: 20px;
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.analysis-report-container {
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.chart-container {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}
.bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.bar-label {
  font-size: 14px;
  color: #a0d8ff;
  width: 40px;
}

.bar-container {
  flex: 1;
  height: 16px;
  background: #e63a8c;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #9c27b0, #e63a8c);
  border-radius: 8px;
  transition: width 0.3s ease;
}

.bar-percent {
  font-size: 14px;
  color: #e0f7ff;
  width: 40px;
  text-align: right;
}

/* 下一步行动建议 */
.action-section {
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin-bottom: 30px;
}

.action-title {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin-bottom: 8px;
}

.action-desc {
  font-size: 14px;
  color: #a0d8ff;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.el-button {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.el-button.primary {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
}

.el-button.primary:hover {
  background: linear-gradient(135deg, #0056b3, #003d80);
}

.el-button.default {
  background: rgba(255, 255, 255, 0.1);
  color: #a0d8ff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.el-button.default:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.salary-section {
  margin: 20px 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.salary-label {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}

.salary-value {
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
}

.other-companies-section {
  margin: 20px 0;
  padding: 10px;
  /* background: rgba(255, 255, 255, 0.08); */
  border-radius: 8px;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  text-align: left;
}


 /* 悬浮注册模块样式 */
    .sticky-register {
      position: sticky;
      top: 20px;
      transition: all 0.3s ease;
    }
    
    .register-section {
      background: linear-gradient(135deg, rgba(26, 61, 140, 0.8), rgba(10, 26, 64, 0.9));
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
    }
    
    .register-section h3 {
      font-size: 22px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 25px;
      color: #ffd700;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #a0d8ff;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .form-group input {
      width: 100%;
      padding: 14px;
      border: 1px solid rgba(74, 144, 226, 0.5);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      color: white;
      font-size: 16px;
      transition: all 0.3s ease;
    }
    
    .form-group input:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
      background: rgba(255, 255, 255, 0.12);
    }
    
    .form-group input::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
    
    .register-btn {
      width: 100%;
      padding: 16px;
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 10px;
      box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
    }
    
    .register-btn:hover {
      background: linear-gradient(135deg, #0066cc, #004999);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
    }
    
    .register-btn:disabled {
      background: linear-gradient(135deg, #6c757d, #5a6268);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    
    .register-benefits {
      margin-top: 25px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      border: 1px dashed rgba(255, 255, 255, 0.2);
    }
    
    .benefits-title {
      font-size: 18px;
      font-weight: 600;
      color: #ff9800;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .benefits-list {
      list-style: none;
    }
    
    .benefits-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 14px;
      color: #e0f7ff;
    }
    
    .benefits-list li::before {
      content: '✓';
      color: #4caf50;
      font-weight: bold;
    }

    /* 职位推荐卡片样式 */
    .job-recommendations{
      margin-top: 20px;
    }

       .job-card {
       margin-bottom: 20px;
      width: 100%;
      max-width: 400px;
      background: linear-gradient(135deg, #2b6cb0, #5a97e4);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
    }
    
    .ai-tag {
      position: absolute;
      top: 15px;
      left: 15px;
      background: #ffc107;
      color: #7a5a00;
      font-size: 12px;
      font-weight: bold;
      padding: 4px 10px;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .job-content {
      display: flex;
      margin-top: 30px;
    }
    
    .job-left {
      flex: 1;
      padding-right: 20px;
    }
    
    .job-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }
    
    .job-level {
      display: inline-block;
      background: #409eff;
      color: white;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 4px;
      margin-left: 15px;
    }
    
    .salary-info {
      margin-bottom: 5px;
    }
    
    .salary-label {
      font-size: 14px;
      color: #ffffff;
    }
    
    /* .salary-value {
      font-size: 18px;
      font-weight: 600;
      color: #409eff;
    } */
    
    .post-time {
      font-size: 12px;
      color: #000000;
    }
    
    .job-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      width: 120px;
    }
    
    .company-info {
      text-align: right;
    }
    
    .company-name {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 16px;
      font-weight: 500;
      color: #000000;
      margin-bottom: 5px;
    }
    
    .company-icon {
      margin-right: 5px;
      font-size: 16px;
    }
    
    .location {
      font-size: 14px;
      color: #000000;
    }
    
    .apply-btn {
      background: #409eff;
      color: white;
      border: none;
      border-radius: 6px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
    }
    
    .apply-btn:hover {
      background: #337ecc;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
    }
    /* 响应式设计 */
    @media (max-width: 992px) {
      .el-col {
        width: 100%;
      }
      
      .el-col-16, .el-col-8 {
        max-width: 100%;
        flex: 0 0 100%;
      }
      
      .cards-grid {
        grid-template-columns: 1fr;
      }
      
      .sticky-register {
        position: relative;
        top: 0;
        margin-top: 30px;
      }
      
      .info-grid, .scores-grid {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 768px) {
      .main-result-card {
        padding: 30px 20px;
      }
      
      .company-card {
        grid-template-columns: 1fr;
      }
      
      .company-name {
        grid-column: span 1;
      }
    }
</style>